import React, {PureComponent} from 'react';
import {Link, CacheLink} from 'react-keeper'
import 'Less/index.less';
import GoodsImg from 'Image/goods-2.jpg';
import PlaceHolder from '../PlaceHolder';

const goodsList = [
  {
    tag: '畅销产品',
    data: [
      {
        id: 1,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      },
      {
        id: 2,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      },
      {
        id: 3,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      },
      {
        id: 4,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      }
    ]
  },
  {
    tag: '新品优先',
    data: [
      {
        id: 5,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      },
      {
        id: 6,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      },
      {
        id: 7,
        name: '腾讯视频 VIP',
        thumb: '',
        credits: 500,
      }
    ]
  }
];
export default class Index extends PureComponent {

  render() {
    return (
      <div className='goods-list'>
        {goodsList.map((good, index) =>
          <div key={index}>
            <ul>
              <li className='group '><PlaceHolder title={good.tag}/></li>
              {good.data.map(item =>
                <li key={item.id}>
                  <CacheLink to='/goods/detail/1'>
                    <div className='img-content'>
                      <img src={GoodsImg} alt="goods"/>
                    </div>
                    <div className='goods-name'>{item.name}</div>
                    <div className='credits'><span className='num'>{item.credits}</span>积分</div>
                  </CacheLink>
                </li>
              )}
            </ul>
          </div>
        )}
        <div className='prompt-information'>
          没有更多商品了
        </div>
      </div>

    );
  }
}